<template>
	<view>
		<input class="uni-input" type="text" :disabled="userinfo.email" v-model="email" placeholder="请输入要绑定的邮箱" />
		<view class="pt-4 px-2">
			<button :class="isDisable ? 'bg-main-disabled':'bg-main'" class=" text-white  text-center" 
			style="border-radius: 50rpx;" :disabled="isDisable || userinfo.email"
			@click="submit">
				完成
			</button>
		</view>
	</view>
</template>

<script>
	import{ mapState } from 'vuex'
	export default {
		data() {
			return {
				email:'',
			}
		},
		computed:{
			isDisable(){
				if(this.email === ''){
					return true
				}
				return false
			},
			...mapState({
				userinfo:state => state.userinfo
			})
		},
		onLoad() {
			if(this.userinfo.email){
				this.email = this.userinfo.email
			}
		},
		methods: {
			isCheck(){
				let rules = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
				if(!rules.test(this.email)){
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return false
				}
				return true
			},
			submit(){
				if(!this.isCheck()){
					return
				}
				this.$H.post('/user/bindemail',{
					email:this.email
				},{
					token:true
				}).then( res => {
					this.$store.commit('editUserInfo',{
						key:"email",
						value:this.email
					})
					uni.navigateBack({
						delta: 1
					});
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
				// uni.showToast({
				// 	title: '修改成功',
				// 	icon: 'none'
				// });
			}
		}
	}
</script>

<style>

</style>
